<!--
 * @Description: 底部第三个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 20:16:58
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadColumn2() {
      fetch(
        "https://gw.alipayobjects.com/os/antfincdn/cK%24sTxSsah/stack-group-column.json"
      )
        .then((data) => data.json())
        .then((data) => {
          const column = new Column(this.$refs['container'], {
            data,
            xField: "month",
            yField: "value",
            isGroup: true,
            isStack: true,
            seriesField: "type",
            groupField: "name",
          });

          column.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadColumn2()
  },
};
</script>
<style scoped>
</style>